<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>主页</title>

    <script src="/web/js/vue.min.js"></script>
    <script src="/web/js/axios.js"></script>
    <script src="/web/js/http.js"></script>
    <link href="/web/css/element.css" rel="stylesheet">
    <script src="/web/js/element.js"></script>
</head>

<body>
<div id="main">

    <el-row :gutter="20">
        <el-col :span="6">
            <div>
                <el-row class="tac">
                    <el-col :span="12">
                        <!--                        <h5>默认颜色</h5>-->
                        <el-menu
                                class="el-menu-vertical-demo"
                                default-active="2">
                            <el-menu-item index="2">
                                <span slot="title"><a href="home.html">导航二</a></span>
                            </el-menu-item>
                            <el-menu-item index="4">
                                <span slot="title">导航四<a></a> </span>
                            </el-menu-item>
                            <el-menu-item index="4">
                                <span slot="title">导航四</span>
                            </el-menu-item>
                            <el-menu-item index="4">
                                <span slot="title">导航四</span>
                            </el-menu-item>
                            <el-menu-item index="4">
                                <span slot="title">导航四</span>
                            </el-menu-item>
                            <el-menu-item index="4">
                                <span slot="title">导航四</span>
                            </el-menu-item>
                            <el-menu-item index="4">
                                <span slot="title">导航四</span>
                            </el-menu-item>
                        </el-menu>
                    </el-col>
                </el-row>
            </div>
        </el-col>

        <el-col :span="15">

            <el-table
                    :data="tableData"
                    :row-class-name="tableRowClassName"
                    style="width: 100%">
                <el-table-column
                        label="id"
                        prop="id"
                        width="180">
                </el-table-column>

                <el-table-column
                        label="用户名"
                        prop="name">
                </el-table-column>
                <el-table-column
                        label="角色列表"
                        prop="">
                    <template slot-scope="scope">

                        <p v-for="role in scope.row.roleNames">{{role}}</p>
                    </template>
                </el-table-column>

                <el-table-column
                        label="编辑"
                        prop="imgListUrl">
                    <template slot-scope="scope">
                        <el-button @click="listUserRoleOne(scope.row.id),dialogVisible = true" circle type="primary">
                            编辑
                        </el-button>
                    </template>
                </el-table-column>


            </el-table>
        </el-col>
        <el-col :span="4">
            <div class="grid-content bg-purple"></div>
        </el-col>
    </el-row>


    <el-dialog
            :visible.sync="dialogVisible"
            title="编辑角色"
            width="30%">
        <div style="margin: 20px">
            <el-checkbox v-for="roleUser in tableRoleUserData" border :label="roleUser.roleName" v-model="roleUser.isMe"></el-checkbox>
        </div>
        <div style="text-align: center">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button @click="dialogVisible = false,updateUserRoleOne(tableRoleUserData)" type="primary">确 定
            </el-button>
        </div>

        </span>
    </el-dialog>

</div>
</body>

<script type="module">
    var app = new Vue({
        el: '#main',
        data: {
            checked1: true,
            checked2: false,
            dialogVisible: false,
            name: '123',
            tableData: [],
            tableRoleUserData:[]
        },
        methods: {
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            },
            tableRowClassName({row, rowIndex}) {
                if (rowIndex === 1) {
                    return 'warning-row';
                } else if (rowIndex === 3) {
                    return 'success-row';
                }
                return '';
            },
            selectUserRole() {
                postRequest("/shopping_boot/sysUserRole/selectUserRole").then(res => {
                    this.tableData = res.data;

                    console.log("进入：", res)
                })
            },
            listUserRoleOne(userId) {
                getRequest("/shopping_boot/sysRole/ListUserRoleOne?userId=" + userId).then(res => {
                    console.log("结果", res)

                    this.tableRoleUserData = res.data
                })
            },
            updateUserRoleOne(userList) {
                console.log("获取：", userList)

                postRequest("/shopping_boot/sysRole/UpdateUserRoleOne", userList).then(res => {
                    console.log("输出结果：", res)

                    this.selectUserRole()
                })
            }

        },
        mounted() {
            this.selectUserRole();
        }
    })
</script>
</html>

<style>
    .el-table .warning-row {
        background: oldlace;
    }

    .el-table .success-row {
        background: #f0f9eb;
    }
</style>